0 11 ۲ آذر ۹۵
در این مطلب با ادامه ترفندهای حرفه ای CSS ProTips در خدمتتون هستیم.
وسط چین کردن المنتها از نظر عمودی
این کار شاید بنظر سخت برسه ولی در عمل خیلی سخت هم نیس و این کار رو میتونین به آسونی انجام بدین و هر المنتی رو بصورت وسط چین در بیارید. کد زیر رو در نظر بگیرید:
1
2
3
4
5
6
7
8
9
10
11
12
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
همونطور که دیدید با استفاده از ویژگی ها و خصوصیات Flexbox کاری کردیم که محتویات درون body بصورت وسط چین قرار داده بشن. همونطور که دیدید برای اینکار در ابتدا display رو برابر با flex قرار میدیم. Vendor Prefix ها رو برای پشتیبانی بیشتر قرار میدیم. ترازبندی ها رو هم center یا مرکز قرار دادیم. برای نمونه میتونین این مثال رو ببینید تا بیشتر با اون آشنا بشید. اگر دلتون میخاد که یه جایی باشه که بتونین با استفاده از اون هر المنتی رو در هر جایی و هر شرایطی، چه افقی و چه عمودی، وسط چین کنید به این آدرس برید و